<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 2.设置容器 -->
        <div id="hello">
            <h1>{{ msg }}</h1>
            <p>我叫{{obj.name}},我今年{{obj.age}}岁</p>
        </div>
    </body>
    <!-- 1.引用Vue3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        // 1.setup函数
            // 1.Vue3特有，也是vue3代码编写的入口/起点
            // 2.在标签中用到的数据/函数，必须在setup中被声明
            // 3.setup中的this不执行Vue实例，并且setup中不会用到this

        // 2.插值表达式/声明式渲染/胡子语法 
            // 1.语法 {{ 表达式 }}
            // 2.作用 把表达式结果渲染到"双标签中"
        // 3.创建Vue3应用
        Vue.createApp({
            // vue3入口
            setup() {
                // 准备数据
                let msg = "hello"
                let obj = {
                    "name": "vue3",
                    "age": 18
                }
                // 返回数据
                return { 
                    msg,obj
                }
            }
        }).mount("#hello")//指定容器其
    </script>
</html>